

function circleProgress(value,average,id){
    console.info("hehe");
    var canvas = document.getElementById(id);
    canvas.setAttribute("width", 110);
    canvas.setAttribute("height", 110);

    canvas.style.height =50;
    var context = canvas.getContext('2d');
    var _this = $(canvas),
        value= Number(value),// 当前百分比,数值
        average = Number(average),// 平均百分比
        color = "",// 进度条、文字样式
        maxpercent = 100,//最大百分比，可设置
        c_width = _this.width(),// canvas，宽度
        c_height =_this.height();// canvas,高度
    // console.info(c_width,c_height);
    // 判断设置当前显示颜色
    if( value== maxpercent ){
        color="#29c9ad";
    }else if( value> average ){
        color="#27b5ff";
    }else{
        color="#ff6100";
    }
    // 清空画布
    context.clearRect(0, 0, c_width, c_height);
    // 画初始圆
    context.beginPath();
    // 将起始点移到canvas中心
    context.moveTo(c_width/2, c_height/2);
    // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆
    context.arc(c_width/2, c_height/2, c_height/2-3, 0, Math.PI * 2, false);
    context.closePath();
    context.fillStyle = '#ddd'; //填充颜色
    context.fill();

    // 绘制内圆
    context.beginPath();
    context.strokeStyle = '#FA7948';
    context.lineCap = 'round';
    context.closePath();
    context.fill();
    context.lineWidth = 3.0;//绘制内圆的线宽度

    function draw(cur){
        // 画内部空白
        context.beginPath();
        context.moveTo(24, 24);
        context.arc(c_width/2, c_height/2, c_height/2-6, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,255,255,1)';  // 填充内部颜色
        // context.fillStyle = '#fff';  // 填充内部颜色
        context.fill();
        // 画内圆
        context.beginPath();
        // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
        // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
        context.arc(c_width/2, c_height/2, c_height/2-4, -(Math.PI/2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
        //context.arc(c_width/2, c_height/2, c_height/2-5,0, ((Math.PI * 2) * cur ) - Math.PI / 2, false);
        context.stroke();
        //在中间写字
        //context.font = "bold 18pt Arial";  // 字体大小，样式
        //context.fillStyle = color;  // 颜色
        //context.textAlign = 'center';  // 位置
        //context.textBaseline = 'middle';
        //context.moveTo(c_width/2, c_height/2);  // 文字填充位置
//            context.fillText(value+"%", c_width/2, c_height/2-20);
//            context.fillText("", c_width/2, c_height/2+20);
    }
    // 调用定时器实现动态效果
    var timer=null,n=0;
    function loadCanvas(nowT){
        timer = setInterval(function(){
            if(n>nowT){
                clearInterval(timer);
            }else{
                draw(n);
                n += 0.01;
            }
        },15);
    }
    loadCanvas(value/100);
    timer=null;
};


$(document).ready(function () {

    var Animate=function(){
        var self=this;
        self.stop=true;
        self.poptimer=null;
        self.popOptions={
            index:1,
            interval:2000
        }
        self.countUpOptions = {
            useEasing : true,
            useGrouping : false,
            separator :',',
            decimal : '.'
        };
        self.cuDuration=2;
//初始化跳动的数字
        self.cu0 = new CountUp("s4num0", 0, 55, 0, self.cuDuration,self.countUpOptions);
        self.cu1 = new CountUp("s4num1", 0,18000, 0, self.cuDuration,self.countUpOptions);
        self.cu21 = new CountUp("s4num21", 0, 2, 0, self.cuDuration,self.countUpOptions);
        self.cu22 = new CountUp("s4num22", 0, 3, 0, self.cuDuration,self.countUpOptions);
        self.cu3 = new CountUp("s4num3", 0, 150, 0, self.cuDuration,self.countUpOptions);
        self.cu4 = new CountUp("s4num4", 0, 20, 0, self.cuDuration,self.countUpOptions);

        self.start=function(){
            self.stop=false;
            go1(0);
            self.go3();
        }

        //落下并启动跳动的数字
        var  go1=function(index){
            $(".section4 .right_block li").eq(index).animate({'opacity':1,'top':0},300,function(){
                go2(index);
                index++;
                if(index<=4){
                    go1(index);
                    go2(index);
                }
            });
        }

        //貌似没用着
        var  go11=function(index){
            $(".section4 .right_block li").animate({'opacity':1},2000,function(){
                go2('all');
            });
        }
        //数字跳动
        var go2=function(index){
                if(index==0){
                    self.cu0.start();
                    circleProgress(80,50,'canvasyuan1');
                }
                if(index==1){
                    self.cu1.start();
                    circleProgress(80,50,'canvasyuan2');
                }
                if(index==2){
                    self.cu21.start();
                    self.cu22.start();
                    circleProgress(80,50,'canvasyuan3');
                }
                if(index==3){
                    self.cu3.start();
                    circleProgress(80,50,'canvasyuan4');
                }
                if(index==4){
                    self.cu4.start();
                    circleProgress(80,50,'canvasyuan5');
                }
                if(index=='all'){
                    self.cu0.start();
                    self.cu1.start();
                    self.cu21.start();
                    self.cu22.start();
                    self.cu3.start();
                    self.cu4.start();
                }
        }

        //节点动画（轮流显示各个节点）
        self.go3=function(){
            var length=$(".global-map .pop-list .area").length;
            self.poptimer=setInterval(function(){
                $(".pop-list span").removeClass("pop-active");
                if(self.popOptions.index>length){
                    self.popOptions.index=1
                }
                var i=self.popOptions.index;
                $(".pop-list span[data-index="+i+"]").addClass("pop-active");
                self.popOptions.index++;
            },self.popOptions.interval)
        }
    };

    var animation=new Animate();

  $(document).scroll(function(){
      var scrollTop=$(window).scrollTop();
      var scrennHeight=$(window).height();
      var s4Top=$(".section4").offset().top;
      if(scrollTop+scrennHeight>s4Top+350){
          if(animation.stop){
              animation.start();
          }
      }
  });

//鼠标移至事件节点事件
    $(".global-map .dot").hover(function(){
            var i=$(this).data("index-to");
            if(animation.poptimer){
                clearInterval(animation.poptimer);
            }
            animation.popOptions.index=i+1;
        $(".pop-list span").removeClass("pop-active");
            var i=$(this).data("index-to");
        $(".pop-list span[data-index="+i+"]").addClass("pop-active");
        },function(){
            var i=$(this).data("index-to");
            $(".pop-list span").removeClass("pop-active");
            animation.go3();
        }
    );
})


